<template>
	<div>
		<newHeader />

		<el-main>
			<!-- 这里是上方的几个特效   -->
			<div id="top1Box">
				<!-- 左侧大图 -->
				<span style="display: inline-block;width: 60%; height:750px; " @mouseenter="enter()" @mouseleave="leave()">
					<el-image fit="fill" :src="page1.a1" :class="buildShowClass()"></el-image>
					<el-image fit="fill" :src="page1.a2" :class="(page1.a2Show)?'elementVisible cengdieOut':'cengdieOut elementNone'"></el-image>
				</span>
				<!-- 右侧并排小图 -->
				<span style="display: inline-block;width: 35%; height: 750px;margin-left: 3%;margin-right: 2%; vertical-align: top; ">
					<span style="display: inline-block;width: 100%; height: 49%; ">
						<el-image fit="fill" :src="page1.a1" :class="(page1.a1Show)?'elementVisible cengdieNormal':'cengdieNormal elementNone'"></el-image>
						<el-image fit="fill" :src="page1.a2" :class="(page1.a2Show)?'elementVisible cengdieOut':'cengdieOut elementNone'"></el-image>
					</span>
					<span style="display: inline-block;width: 100%; height: 49%;margin-top: 1%; ">
						<el-image fit="fill" :src="page1.a1" :class="(page1.a1Show)?'elementVisible cengdieNormal':'cengdieNormal elementNone'"></el-image>
						<el-image fit="fill" :src="page1.a2" :class="(page1.a2Show)?'elementVisible cengdieOut':'cengdieOut elementNone'"></el-image>
					</span>
				</span>

				<!--  悬浮的缩放图  -->
				<span :class="buildShowTop1(0)">

					<el-image fit="fill" :src="page1.a3" :class="(page1.a3Scale90100)?'scaleImg100':'scaleImg'" @mouseenter="enterTag()"
					 @mouseleave="leaveTag()"></el-image>

				</span>

				<!--  显示的说明文字  -->
				<span :class="buildShowTop1(1)">
					<span class="pinpaiTitle">品牌故事</span>
					<p class="pinpaiDesc">一百句品牌描述;一百句品牌描述;一百句品牌描述;一百句品牌描述;一百句品牌描述;一百句品牌描述;一百句品牌描述;一百句品牌描述;一百句品牌描述;</p>
					<el-button style="background: #000000;color: #FFFFFF;padding-left: 50px;padding-right: 50px;margin-top: 20px;"
					 size="large">MORE</el-button>
				</span>
			</div>

			<!--  中间的图片列表  -->
			<div id="top2ImgList" style="background: #FFFFFF;height: 800px; ">
				<!-- <span style="display: inline-block; width: 25%;text-align: center; ">
					<span style="font-family: arial;letter-spacing: 3px;font-size: 22px;word-spacing: normal;color: #000000;">ONLINE
						STORE</span>
					<br />
					<span style="display:inline-block;line-height:1.2;font-size: 18px;word-spacing: normal;color: #000000;">fashion
						show</span>
				</span> -->

				<!-- <el-image fit="cover" :class="buildShowTop2()" :src="urlChang" lazy></el-image>
				<el-image fit="cover" :class="buildShowTop2()" :src="urlChang" lazy></el-image>
				<el-image fit="cover" :class="buildShowTop2()" :src="urlChang" lazy></el-image> -->

				<div id="imgList" :class="buildShowTop2()" >
					<span style="display: inline-block; width: 25%;text-align: center; 
					position: absolute;
					left: 10px;
					top: 50%;
    transform: translate(2%,10%); ">
						<span style="font-family: arial;letter-spacing: 3px;font-size: 22px;word-spacing: normal;color: #000000;">ONLINE
							STORE</span>
						<br />
						<span style="display:inline-block;line-height:1.2;font-size: 18px;word-spacing: normal;color: #000000;">fashion
							show</span>
					</span>
					
					<div class="menu-container" style="display: inline-block;margin-left: 30%;">
						<ul>
							<li @mouseenter="enterFor()" @mouseleave="leaveFor()">
								<a :class="showMengceng?'mengcenghover':'mengceng'" href="./home">Some cool quote
									about <strong>home</strong></a>
								<el-image fit="cover" :class="'imgForListCommonList'" :src="urlChang" lazy></el-image>
							</li>
							<li @mouseenter="enterFor()" @mouseleave="leaveFor()">
								<a :class="showMengceng?'mengcenghover':'mengceng'" href="./home">Some cool quote
									about <strong>home</strong></a>
								<el-image fit="cover" :class="'imgForListCommonList'" :src="urlChang" lazy></el-image>
							</li>
							<li @mouseenter="enterFor()" @mouseleave="leaveFor()">
								<a :class="showMengceng?'mengcenghover':'mengceng'" href="./home">Some cool quote
									about <strong>home</strong></a>
								<el-image fit="cover" :class="'imgForListCommonList'" :src="urlChang" lazy></el-image>
							</li>
						</ul>
					</div>
				</div>
			</div>



		</el-main>

		<newFooter />
	</div>
</template>

<script>
	// 导入其他模板示例
	import newHeader from './newheader.vue'
	import newFooter from './newFooter.vue'

	var _clientHeight; //可见区域高度
	var _scrollTop; //滚动条距离顶部高度
	var top1ToTop;
	var top2ListToTop;
	export default {
		name: 'home',
		components: {
			newHeader,
			newFooter
		},
		data() {
			return {
				// 第一块图标区域的页面数据
				page1: {
					a2: 'https://ccdn.goodq.top/caches/6cb70c11d7924995c4268c57fc3cb083/aHR0cHM6Ly81OGJmOTlmMWNlMjY5LnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMTAvZTYwMzc5OWU5ODQ3MTNiNGU3NzI4NjYyOGFlYmY4ZmQtOTAud2VicA_p_p100_p_3D_p_p100_p_3D.webp',
					a1: 'https://ccdn.goodq.top/caches/6cb70c11d7924995c4268c57fc3cb083/aHR0cHM6Ly81OGJmOTlmMWNlMjY5LnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMTAvNzY3NzI0MmU5ZDU0ZTgyN2JhYTU2MDQ2YmQyMDg3YTUtOTAud2VicA_p_p100_p_3D_p_p100_p_3D.webp',
					a1Show: true,
					a2Show: true,
					a3: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589801522181&di=f61249e3381cec8a6ee3ebde2bb444bf&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fzhidao%2Fwh%253D450%252C600%2Fsign%3D0522dd202e2eb938ec3872f6e052a903%2F21a4462309f79052c9e799ff0df3d7ca7acbd573.jpg',
					a3Lazy: 'https://ccdn.goodq.top/caches/6cb70c11d7924995c4268c57fc3cb083/aHR0cHM6Ly81OGJmOTlmMWNlMjY5LnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMTAvMTdkNmE1MjI3MmFiNmMxY2NjNTZkMzQ5ZmM5YWZmODMtOTAud2VicA_p_p100_p_3D_p_p100_p_3D.webp',
					a3Scale90100: false,
				},
				// 悬浮图和介绍那一栏
				top1IsLoad: false,
				// 三列图标那一栏
				top2IsLoad: false,
				urlChang: 'https://ccdn.goodq.top/caches/6cb70c11d7924995c4268c57fc3cb083/aHR0cHM6Ly81OGJmOTlmMWNlMjY5LnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMTAvNDFjOGJjNjE3NWRiYjBjMTljMTE4Y2Q2NzYxMWFiMDItOTAud2VicA_p_p100_p_3D_p_p100_p_3D.webp',

				showMengceng: false,
			}
		},
		mounted() {
			_clientHeight = 1000; //可见区域高度
			_scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			// 挂载之前，准备好页面高度，组件高度，进行懒加载的准备工作
			//字行的准备    三列图片的准备
			var top1Box = document.querySelector('#top1Box');
			console.log("top1Box-->" + top1Box.offsetHeight + "---" + top1Box.offsetLeft + "----" + top1Box.offsetParent +
				"-----" + top1Box.offsetTop + "-----" + top1Box.offsetWidth)
			top1ToTop = top1Box.offsetTop - (top1Box.offsetHeight / 2)
			// 带三个图片的列表
			top2ListToTop = document.querySelector('#top2ImgList').offsetTop - (document.querySelector('#top2ImgList').offsetHeight /
				2)


			// 使用了节流函数~实现性能较好的懒加载
			window.addEventListener('scroll', this.throttle(this.lazyload, 300, 500, this.top1IsLoad && this.top2IsLoad))
			// 使用了防抖函数~优化不断触发的窗口变化
			window.addEventListener('resize', this.debounce(this.computedClientHeight, 800))
		},
		methods: {
			/**
			 * 简单的防抖函数debounce
			 * @param {*}
			 * fun 要执行的函数
			 * wait 触发函数的时间间隔
			 */
			debounce(fun, wait) {
				var timer = null // 创建一个标记用来存放定时器的返回值
				return function() {
					clearTimeout(timer) // 每当用户输入的时候把前一个 setTimeout clear 掉
					timer = setTimeout(function() {
						// 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 wait 时间内如果还有字符输入的话，就不会执行 fun 函数
						fun.apply(this, arguments)
						console.log("debounce:")
					}, wait)
				}
			},
			lazyload() {
				// 获取滚动条距离顶部高度
				// top1IsLoad = n >= num
				if (!this.top1IsLoad) {
					//加载悬浮栏动画
					console.log('加载悬浮栏动画')
					var top1Box = document.querySelector('#top1Box');
					var top1BoxRect = top1Box.getBoundingClientRect();
					console.log('top1Box3-->' + top1BoxRect.left + "|---|" + top1BoxRect.top + "---");
					if (top1BoxRect.top < 100) {
						console.log('加载悬浮栏动画，开始啦！')
						this.top1IsLoad = true
						this.page1.a3 = this.page1.a3Lazy;
					}
				}
				if (!this.top2IsLoad) {
					console.log('加载三列图标动画')
					var top2ImgList = document.querySelector('#top2ImgList');
					var top2ListRect = top2ImgList.getBoundingClientRect();
					console.log('top1Box3-->' + top2ListRect.left + "|---|" + top2ListRect.top + "---");
					if (top2ListRect.top < 500) {
						console.log('加载三列图标动画，开始啦！')
						this.top2IsLoad = true
					}

				}
			},
			/**
			 * 简单的节流函数throttle
			 * @param {*}
			 * fun 要执行的函数
			 * delay 延迟
			 * time  在time时间内必须执行一次
			 * flag 是否继续触发节流函数 (根据需求自定义,这里就是想当加载完图片时不需要进行多余的执行--优化)
			 */
			throttle(fun, delay, time, flag) {
				var timeout,
					startTime = new Date()
				return function() {
					if (this.top1IsLoad && this.top2IsLoad) return

					var context = this,
						args = arguments,
						curTime = new Date()
					clearTimeout(timeout)

					// 如果达到了规定的触发时间间隔，触发 fun
					if (curTime - startTime >= time) {
						fun.apply(context, args)
						startTime = curTime
						// 没达到触发间隔，重新设定定时器
					} else {
						timeout = setTimeout(function() {
							fun.apply(context, args)
						}, delay)
					}
				}
			},
			// 监听窗口变化重新计算可是区域
			computedClientHeight() {
				_clientHeight = document.documentElement.clientHeight //可见区域高度
			},
			loadTop1() {
				if (!this.top1IsLoad) {
					//加载到这个位置
					this.top1IsLoad = true;
				}
			},
			enterFor() {
				console.log("操作enterFor")
				this.showMengceng = true;
			},
			leaveFor() {
				console.log("操作")
				this.showMengceng = false;
			},
			enter() {
				this.page1.a1Show = false;
				this.page1.a2Show = true;
			},
			leave() {
				this.page1.a1Show = true;
				this.page1.a2Show = false;
			},
			enterTag() {
				this.page1.a3Scale90100 = true;
			},
			leaveTag() {
				this.page1.a3Scale90100 = false;
			},

			buildShowClass() {
				return (this.page1.a1Show) ? ['elementVisible', ' cengdieNormal'] : ['cengdieNormal elementNone']
			},
			buildShowTop1(tag) {
				if (0 == tag) {
					return (this.top1IsLoad) ? ['top1Bihua', 'top1BihuaStart'] : ['top1Bihua']
				} else {
					return (this.top1IsLoad) ? ['pinpaiTopStart', 'pinpaiTop'] : ['pinpaiTop']
				}
			},
			buildShowTop2() {
				return (this.top2IsLoad) ? ['elFromBottomInInner', 'elVisible', 'imgForListCommon'] : ['elHide', 'imgForListCommon']
			},
		}
	}
</script>

<style scoped="scoped">
	* {
		position: relative;
	}

	.imgForListCommon {}

	.elementVisible {
		opacity: 1;
		transition: all 0.5s linear;
	}

	.elementNone {
		opacity: 0;
		transition: all 0.5s linear;
	}

	#top1Box .cengdieNormal {
		/*  默认显示在框内  */
		display: inline-block;
		position: absolute;
		top: 0px;
		width: 100%;
		height: 100%;

	}

	#top1Box .cengdieOut {
		/*  鼠标移入后显示的视图  */
		display: inline-block;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;

	}

	#top1Box .top1Bihua {
		display: inline-block;
		position: relative;
		left: 20%;
		top: -50px;
		width: 528px;
		height: 528px;
		border-radius: 0px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		background-color: #FFFFFF;
		/*  内部元素居中得话，外框划定范围，并设置水平居中和空间   元素本身使用 vertical-align: middle; 进行上下居中  */
		text-align: center;
		line-height: 528px;
	}

	.el-col .boxForLogin {
		border-radius: 4px;
		border: 1px solid #eee;
		padding: 40px;
		display: block;
	}

	.el-col .boxvisible {
		display: block;
	}

	.el-col .boxGone {
		display: none;
	}

	.el-form-item label {
		font-size: 12px;
	}

	.el-form-item__content {
		line-height: 100%;
	}

	.el-form-item .el-form-item__content .el-checkbox__label {
		font-size: 12px;
		line-height: 100%;
	}


	.fadeShow {
		opacity: 1;
		transition: all 0.5s linear;
	}

	.fadeHide {
		opacity: 0;
		transition: all 0.5s linear;
	}

	.elVisible {
		visibility: visible;
	}

	.elHide {
		visibility: hidden;
	}

	/* 下方进入动画 */
	@keyframes elBottomOutIn {

		/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
		0% {
			transform: translateY(600px);
			-webkit-transform: translateY(600px);
		}

		100% {
			transform: translateY(0px);
			-webkit-transform: translateY(0px);
		}
	}

	.elFromBottomInInner {
		/* margin: 0 auto; */
		-webkit-animation-name: elBottomOutIn;
		/*关键帧名称*/
		-webkit-animation-timing-function: ease-in-out;
		/*动画的速度曲线*/
		-webkit-animation-iteration-count: 1;
		/*动画播放的次数*/
		-webkit-animation-duration: 1s;
		/*动画所花费的时间*/
		animation-fill-mode: forwards
	}

	@keyframes elLeftOutIn {

		/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
		0% {
			transform: translateX(-600px);
			-webkit-transform: translateX(-600px);
		}

		100% {
			transform: translateX(0px);
			-webkit-transform: translateX(0px);
		}
	}

	@keyframes elRightOutIn {

		/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
		0% {
			transform: translateX(600px);
			-webkit-transform: translateX(600px);
		}

		100% {
			transform: translateX(0px);
			-webkit-transform: translateX(0px);
		}
	}

	/*  单纯定义动画  */
	#top1Box .pinpaiTopStart {
		/* margin: 0 auto; */
		-webkit-animation-name: elRightOutIn;
		/*关键帧名称*/
		-webkit-animation-timing-function: ease-in-out;
		/*动画的速度曲线*/
		-webkit-animation-iteration-count: 1;
		/*动画播放的次数*/
		-webkit-animation-duration: 1s;
		/*动画所花费的时间*/
		animation-fill-mode: forwards
	}

	/* 单纯定义动画 */
	#top1Box .top1BihuaStart {

		/* margin: 0 auto; */
		-webkit-animation-name: elLeftOutIn;
		/*关键帧名称*/
		-webkit-animation-timing-function: ease-in-out;
		/*动画的速度曲线*/
		-webkit-animation-iteration-count: 1;
		/*动画播放的次数*/
		-webkit-animation-duration: 1s;
		/*动画所花费的时间*/
		animation-fill-mode: forwards
	}



	@keyframes scaleChecked {

		/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
		0% {
			transform: scale(1);
			-webkit-transform: scale(1);

		}

		100% {
			transform: scale(1.12);
			-webkit-transform: scale(1.12);
			/*放大1.1倍*/
		}
	}

	.top1Bihua .scaleImg {
		display: inline-block;
		width: 90%;
		height: 90%;
		/* 元素本身使用 vertical-align: middle; 进行上下居中  */
		vertical-align: middle;
		/* 这个是块元素 */
		/* margin: 0 auto; */
		-webkit-animation-name: scaleNormal;
		/*关键帧名称*/
		-webkit-animation-timing-function: ease-in-out;
		/*动画的速度曲线*/
		-webkit-animation-iteration-count: 1;
		/*动画播放的次数*/
		-webkit-animation-duration: 0.5s;
		/*动画所花费的时间*/
		animation-fill-mode: forwards
	}

	@keyframes scaleNormal {

		/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
		0% {
			transform: scale(1.12);
			-webkit-transform: scale(1.12);
			/*开始为原始大小*/
		}

		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
			/*放大1.1倍*/
		}
	}

	.top1Bihua .scaleImg100 {
		display: inline-block;
		width: 90%;
		height: 90%;
		/* 元素本身使用 vertical-align: middle; 进行上下居中  */
		vertical-align: middle;
		/* 这个是块元素 */
		/* margin: 0 auto; */
		-webkit-animation-name: scaleChecked;
		/*关键帧名称*/
		-webkit-animation-timing-function: ease-in-out;
		/*动画的速度曲线*/
		-webkit-animation-iteration-count: 1;
		/*动画播放的次数*/
		-webkit-animation-duration: 0.5s;
		/*动画所花费的时间*/
		animation-fill-mode: forwards
			/* 动画最后效果要保留，默认不保留 */
	}

	.pinpaiTop {
		display: inline-block;
		float: right;
		right: 15%;
		margin-top: 10%;
		width: 30%;
	}

	.pinpaiTop .pinpaiTitle {
		font-family: '微软雅黑';
		font-size: 24px;
		font-weight: bold;
		font-style: normal;
		color: #333333;
	}

	.pinpaiTop .pinpaiDesc {
		font-family: '微软雅黑';
		font-size: 13px;
		font-weight: 100;
		font-style: normal;
		color: #808080;
		margin-top: 30px;
		line-height: 200%;
	}

	/*  切换标签流  */
	#imgList .menu-container {
		font-family: Georgia, Times, "Times New Roman", serif;
		width: 70%;
		height: 700px;
		background-color: #fff;
	}

	#imgList .menu-container ul,
	#imgList .menu-container li {
		margin: 0;
		padding: 0;
		list-style: none;
		position: relative;
	}

	#imgList .menu-container li {
		float: left;
		width: 32%;
		margin-left: 1%;
		height: 700px;
	}

	#imgList .imgForListCommonList {
		width: 100%;
		height: 700px;
		margin-left: 1%;
		margin-top: 3%;
		position: absolute;
	}

	#imgList .menu-container li .mengceng {
		color: #0CC5DA;
		text-decoration: none;
		line-height: 1.4em;
		font-size: 1.5em;
		background-color: #000;
		color: #fff;
		position: absolute;
		width: 100%;
		height: 700px;
		margin-top: 3%;
		margin-left: 1%;
		z-index: 1;
		text-align: center;

		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;

		filter: alpha(opacity=0);
		-moz-opacity: 0;
		-khtml-opacity: 0;
		opacity: 0;

		-webkit-transition: all 0.5s ease-in-out;
		-moz-transition: all 0.5s ease-in-out;
		-o-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
	}

	#imgList .menu-container li .mengcenghover {
		/*  由于属姓是叠加的，所以不重复设置padding  */
		line-height: 37.5rem;
		font-size: 1.5em;
		background-color: #000;
		color: #fff;
		text-align: center;

		color: #DCE808;
		text-decoration: underline;
		text-decoration: none;
		position: absolute;
		width: 100%;
		height: 700px;
		z-index: 1;
		margin-top: 3%;
		margin-left: 1%;

		filter: alpha(opacity=60);
		-moz-opacity: 0.6;
		-khtml-opacity: 0.6;
		opacity: 0.6;

		-webkit-transition: all 0.5s ease-in-out;
		-moz-transition: all 0.5s ease-in-out;
		-o-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
	}
</style>
